<template>
<div style="border: 1px solid #ccc;">
  <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
  <Editor style="height: 500px; overflow-y: hidden;" v-model="html" :defaultConfig="getEditConfig()" :mode="mode" @onCreated="onCreated" />
</div>
</template>
<script>
import Vue from 'vue'
import {
  Editor,
  Toolbar
} from '@wangeditor/editor-for-vue'
import {
  SystemController
} from '@/api';
import axios from 'axios';
import projectConfig from '@/core/config';
import fetchPost from "@/core/http/index.js"
export default Vue.extend({
  components: {
    Editor,
    Toolbar
  },
  props: {
    value: {
      type: String
    },
    readOnly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      editor: null,
      html: '',
      toolbarConfig: {},
      mode: 'default', // or 'simple'
    }
  },
  updated() {
    this.$emit('update:value', this.html);
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      this.$set(this, "html", this.value)
    },
    getEditConfig() {
      let me = this;
      let obj = {
        placeholder: '请输入内容...',
        readOnly: this.readOnly,
        MENU_CONF: {
          uploadImage: {
            async customUpload(file, insertFn) {
              let fm = new FormData();
              fm.append('uploadFile', file)
              fm.append('asImage', true)
              SystemController.uploadFiles(me, fm, {
                headers: {
                  'Content-Type': 'application/x-www-form-urlencoded'
                },
              }).then(res => {
                let url = projectConfig.baseUrl + 'admin/upms/file/download?filename=' + res.data.filename + '&type=1';
                insertFn(url)
              }).catch(err => {
                me.$message.error('上传失败，请稍后重试')
              })
            }
          },
          uploadVideo: {
            async customUpload(file, insertFn) {
              let fm = new FormData();
              fm.append('uploadFile', file)
              fm.append('asImage', false)
              SystemController.uploadFiles(me, fm, {
                headers: {
                  'Content-Type': 'application/x-www-form-urlencoded'
                },
              }).then(res => {
                let url = projectConfig.baseUrl + 'admin/upms/file/download?filename=' + res.data.filename;
                insertFn(url)
              }).catch(err => {
                me.$message.error('上传失败，请稍后重试')
              })
            }
          }
        }
      }
      return obj
    },
    getHtml() {
      return this.html
    }
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
})
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
